<div ms-controller="bill" id="page_bill" ms-visible="nowPage=='bill'">
    <style>
        #page_bill header {
            background-color: #383431;
            position: fixed;
            top: 0;
            width: 100%;
            height: 45px;
            color: white;
            text-align: center;
        }

        #page_bill header > b {
            display: block;
            margin-top: 10px;
        }

        #page_bill .rbbox:first-child {
            min-height: 90px;
        }

        #page_bill .rbbox {
            background-color: white;
            border-radius: 4px;
            border: solid 1px #e4e4e4;
            margin: 10px;
        }

        #page_bill .rbbox#phHave {
            text-align: right;
        }

        #page_bill .rbbox#phHave > div:first-child {
            float: left;
            text-align: left;
            padding: 15px 0 0 15px;
            display: inline-block;
            vertical-align: middle;
        }

        #page_bill .rbbox#phHave > div:first-child > p:last-child {
            margin-top: 8px;
            color: #797979;
        }

        #page_bill .rbbox#phHave > div:last-child {
            color: red;
            border-left: solid 1px #e2e2e2;
            padding: 10px 20px 10px 10px;
            margin: 10px 0 10px 0;
            display: inline-block;
            vertical-align: middle;
        }

        #page_bill .rbbox1 {
            margin-top: 40px;
        }

        #page_bill .avatar {
            width: 70px;
            height: 70px;
            margin: 10px;
            position: absolute;
        }

        #page_bill .rbbox .info {
            vertical-align: top;
            margin: 10px 0 0 90px;
            display: inline-block;
        }

        #page_bill .rbbox .info > h1 {
            color: #797979;
        }

        #page_bill .rbbox .info > h2 {
            color: #1a1a1a;
        }

        #page_bill .rbbox .oneBar {
            padding: 10px 25px;
        }

        #page_bill .rbbox .oneBar:first-child > div.f28 {
            padding-right: 10px;
        }

        #page_bill .rbbox .oneBar:first-child {
            border-bottom: solid 1px #d8d8d8;
        }

        #page_bill .rbbox .oneBar > * {
            display: inline-block;
        }

        #page_bill .btn-getVec {
            background-color: #fec418;
            text-align: center;
            color: white;
            position: absolute;
            float: right;
            padding: 12px 10px;
            margin-top: -11px;
            width: 100px;
            right: 9px;
            border-radius: 0 0 4px 0;
        }

        #page_bill .btn-getVec.un {
            background-color: #dddddd;
            color: #aaaaaa;
        }

        #page_bill .btn-normal {
            border-radius: 999px;
            border: solid 2px #ffbb77;
            background-color: transparent;
            color: #1a1a1a;
            text-align: center;
            margin: 40px 20px;
            padding: 10px;
            width: calc(100% - 64px);
        }

        #page_bill .btn-normal:active {
            border: solid 2px #ffbb77;
            background-color: #ffbb77;
            color: white;
        }

        #page_bill .subHead {
            padding: 10px;
        }

        #page_bill .subHead > p {
            margin-left: 20px;
            color: #888888;
        }

        #page_bill .nmbox {
            background-color: white;
            border-radius: 4px;
            border-top: solid 1px #e4e4e4;
            border-bottom: solid 1px #e4e4e4;
            margin-bottom: 10px;
            width: 100%;
        }

        #page_bill .nmbox .info {
            vertical-align: top;
            margin: 10px 0 0 90px;
            display: block;
            min-height: 80px;
        }

        #page_bill .nmbox .info > h1 {
            color: #797979;
        }

        #page_bill .nmbox .info > h2 {
            color: #1a1a1a;
        }

        #page_bill .nmbox .amount {
            border-top: solid 1px #d8d8d8;
            padding: 10px 0;
            width: 100%;
        }

        #page_bill .nmbox .amount > span:first-child {
            width: 90px;
            text-align: center;
            color: #797979;
            display: inline-block;
        }

        #page_bill .nmbox .amount > span:last-child {
            margin-left: 4px;
            color: #ff9000;
            display: inline-block;
        }

        #page_bill .nmbox .oneBar > * {
            vertical-align: middle;
        }

        #page_bill .nmbox .oneBar > img {
            margin: 8px 20px;
            width: 36px;
            height: 36px;
        }

        #page_bill .nmbox .oneBar > label > div {
            margin: 15px 20px;
            float: right;
        }

        #page_bill #stepfail .hImg {
            margin: 10px 20px;
            padding-bottom: 60px;
            width: calc(100% - 40px);
            height: 150px;
            background: url(imgs/img_payfail.png) no-repeat center;
            background-size: 50%;
            border-bottom: solid 1px #d8d8d8;
        }

        #page_bill #stepfail .tip {
            margin-top: 30px;
            width: 100%;
            text-align: center;
            color: #797979;
        }
    </style>

    <div id="step1" ms-visible="step=='step1'">

        <!--<header>-->
        <!--<b class="f36">纹身大咖</b>-->
        <!--</header>-->
        <!--<div class="blank" style="height:45px;"></div>-->
        <!--{{obj|html}}-->
        <div class="rbbox rbbox1">
            <img class="avatar" ms-src="avatar">

            <div class="info">
                <h1 class="f32">纹身大咖：{{nickname}}</h1>

                <h1 class="f32">向您发起微信收款</h1>

                <h2 class="f36">{{amount|f$current}}</h2>
            </div>
        </div>

        <div class="rbbox" ms-visible="!ph$have">
            <div class="oneBar">
                <div class="f28">+86</div>
                <input type="tel" class="f32 textInput" ms-duplex="phonenum" id="i-phonenum" placeholder="填写您的手机号"
                       maxlength="11"/>
            </div>
            <div class="oneBar">
                <div class="f28 btn-getVec" ms-click="vec$get" ms-class-un="phonenum.length!=11||vec$rem>0"
                     ms-visible="vec$rem==0">获取验证码
                </div>
                <div class="f28 btn-getVec" ms-click="vec$get" ms-class-un="phonenum.length!=11||vec$rem>0"
                     ms-visible="vec$rem!=0">剩余{{vec$rem}}秒
                </div>
                <input type="tel" class="f32 textInput" ms-duplex="vec" id="i-vec" placeholder="填写验证码" maxlength="6"/>
            </div>
        </div>

        <div class="rbbox" id="phHave" ms-visible="ph$have">
            <div>
                <p class="f28">当前账号:+86 {{phonenum}}</p>

                <p class="f24">*交易短信通知会发送到这个手机号码</p>
            </div>
            <div class="f24" ms-click="ph$change">切换<br/>账号</div>
        </div>

        <div class="f36 btn-normal" ms-click="tab($event,'step2')">去结算</div>

    </div>


    <div id="step2" ms-visible="step=='step2'">
        <!--<header>-->
        <!--<b class="f36">纹身大咖</b>-->
        <!--</header>-->
        <!--<div class="blank" style="height:45px;"></div>-->

        <div class="subHead">
            <div class="icon-back-gray p-a" ms-click="tab($event,'step1')"></div>
            <p class="f28" ms-click="tab($event,'step1')">返回</p>
        </div>

        <div class="nmbox">
            <img class="avatar" ms-src="avatar">

            <div class="info">
                <h1 class="f32">纹身大咖：{{nickname}}</h1>

                <h1 class="f32">向您发起微信收款</h1>

                <h2 class="f36">{{amount|f$current}}</h2>
            </div>

            <div class="amount"><span class="f28">实付金额</span><span class="f36">{{amount|f$current}}</span></div>
        </div>

        <div class="nmbox">
            <div class="oneBar">
                <img src="./imgs/wxpay.png"/>
                <label for="channal_wx_pub">
                    <span class="f32">微信支付(推荐)</span>
                    <input id="channal_wx_pub" class="icheck" type="radio" value="channal_wx_pub" name="iCheck"
                           ms-duplex="channal">
                </label>
            </div>
        </div>

        <div class="f36 btn-normal" ms-click="putBill">去支付</div>

    </div>

    <div id="stepfail" ms-visible="step=='stepfail'">

        <!--<header>-->
        <!--<b class="f36">纹身大咖</b>-->
        <!--</header>-->
        <!--<div class="blank" style="height:45px;"></div>-->

        <div class="hImg"></div>
        <h1 class="f32 tip">支付没有完成哦，请尝试重新支付</h1>

        <div class="f36 btn-normal" ms-click="payBill">重新支付</div>

    </div>

</div>